import { useSelector, useDispatch } from 'react-redux';

import { increment, asyncIncrement } from '../toolkit-store/features/counterSlice';
import { loadPic, loadWeatherData } from "../toolkit-store/features/weatherSlice"

function App() {
    const { count } = useSelector((state) => state.counter);
    const { weather } = useSelector(state => state.weather);
    const dispatch = useDispatch();

    const handleWeather = async () => {
        // 在这里dispatch返回一个promise
        const res = await dispatch(loadPic())
        console.log("组件", res);
    }

    return (
        <div className='App'>
            <button
                onClick={() => {
                    dispatch(increment({ step: 2 })); // dispatch派发action
                }}
            >
                {count}
            </button>
            <hr />
            <button
                onClick={() => {
                    dispatch(asyncIncrement({ step: 1 }));
                }}
            >
                {count}
            </button><br />
            <div>{weather ? weather : "无"}</div>
            <button onClick={handleWeather}>请求数据</button>
        </div>
    );
}

export default App;